
<template>
  <el-row v-loading="loading">
    <el-col :span="24">
      <temp-edit ref="tempEdit" v-on:save-finished="searchTemp"></temp-edit>
      <el-row class="search-row">
        <el-col :span="12">
          <el-input
            placeholder="档案号/姓名"
            size="small"
            v-model="search.tempName" 
          >
            <el-button slot="append" icon="el-icon-search" @click="searchTemp()"
              >查询</el-button
            >
          </el-input>
        </el-col>
        <el-col :span="12" style="text-align: right">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="small"
            v-show="permission.add"
            @click="handleCreateDiary()"
            >添加</el-button
          >
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table
            :data="templateList"
            border
            size="mini"
            header-cell-class-name="header-row"
          >
            <el-table-column
              prop="tempName"
              label="标题"
              header-align="center"
            ></el-table-column>
            <el-table-column
              prop="tempCrux"
              label="关键词"
              header-align="center"
            ></el-table-column>
            <el-table-column
              prop="intendedFor"
              label="适用人群"
              header-align="center"
            ></el-table-column>
            <el-table-column
              prop="programmeObjectives"
              label="方案目标"
              header-align="center"
            ></el-table-column>
            <el-table-column
              prop="start"
              :formatter="handleStart"
              label="状态"
              header-align="center"
            ></el-table-column>

            <el-table-column
              prop="remarks"
              label="备注"
              header-align="center"
            ></el-table-column>

            <el-table-column
              label="操作"
              header-align="center"
              align="center"
              width="260"
            >
              <template slot-scope="scope">
                <el-button
                  v-show="permission.edit"
                  type="primary"
                  size="mini"
                  @click="handleChangePassword(scope.$index, scope.row)"
                  >编辑</el-button
                >

                <el-button
                  v-show="true"
                  v-if="scope.row.start == 2"
                  type="warning"
                  size="mini"
                  @click="handleUPByStarTrue(scope.$index, scope.row)"
                  >禁用</el-button
                >

                <!-- <el-button v-show="true" size="mini" type="danger" @click="handleUPByStarTrue(scope.$index, scope.row)">
                  {{scope.row.status=='禁用'?'启用':'禁用'}}
                </el-button>   -->

                <el-button
                  v-show="true"
                  v-if="scope.row.start == 1"
                  type="success"
                  size="mini"
                  @click="handleUPByStartFalse(scope.$index, scope.row)"
                  >启用</el-button
                >

                <el-button
                  v-show="permission.remove"
                  size="mini"
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  @click="handleDeletePopulation(scope.$index, scope.row)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="1"
            :page-sizes="[3, 10, 20]"
            :page-size="3"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableTotal"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>



<script>
import {
  findAllList,
  removeTemplate,
  getTemplateById,
  updateByTemplateFalse,
  updateByTemplateTrue,
} from "@/api/HealthIntervention/Template";
import TempEdit from "@/components/HealthIntervention/TemplateManagement/tempEdit.vue";

export default {
  data() {
    return {
      templateList: [],
      isTempStartFalse: true,
      isTempStartTrue: false,
      permission: {
        add: true,
        edit: true,
        remove: true,
      },
      tableTotal: 0,
      search: {
        tempName: "",
        offset: 1,
        limit: 3,
      },
      loading: true,
    };
  },
  methods: {
    //判断是否禁用
    handleStart(row) {
      if (row.start === 1) {
        return "已禁用";
      } else {
        return "已启用";
      }
    },

    searchTemp() {
      this.loading = true;
      findAllList(this.search)
        .then((response) => {
          this.templateList = response.data.rows;
          this.tableTotal = response.data.total;
          this.loading = false;
        })
        .catch((error) => {
          this.outputError(error);
        });
    },

    //分页
    handleSizeChange(val) {
      this.search.limit = val;
      this.search.offset = 1;
      this.searchTemp();
    },
    handleCurrentChange(val) {
      this.search.offset = val;
      this.search.currentPage = val;
      this.searchTemp();
    },

    //禁用
    handleUPByStarTrue(index, row) {
      this.$confirm("确定禁用吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.loading = true;
          updateByTemplateFalse(row.tempId)
            .then((response) => {
              this.loading = false;
              this.searchTemp();
              this.$message({
                message: "已禁用",
                type: "success",
              });
            })
            .catch((error) => {
              this.outputError(error);
            });
        })
        .catch(() => {});
    },

    //启用
    handleUPByStartFalse(index, row) {
      this.$confirm("确定启用吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.loading = true;
          updateByTemplateTrue(row.tempId)
            .then((response) => {
              this.loading = false;
              this.searchTemp();
              this.$message({
                message: "已启用",
                type: "success",
              });
            })
            .catch((error) => {
              this.outputError(error);
            });
        })
        .catch(() => {});
    },

    //添加
    async handleCreateDiary() {
      this.loading = true;
      try {
        this.$refs.tempEdit.$emit("openAddTemplateDialog");
        this.loading = false;
      } catch (error) {
        this.outputError(error);
      }
    },

    //编辑
    async handleChangePassword(index, row) {
      this.loading = true;
      try {
        let [getRouterResp] = await Promise.all([getTemplateById(row.tempId)]);
        this.$refs.tempEdit.$emit("openEditTemplateDialog", getRouterResp.data);
        this.loading = false;
      } catch (error) {
        this.outputError(error);
      }
    },

    //删除
    handleDeletePopulation(index, row) {
      this.$confirm("确定删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.loading = true;
          removeTemplate(row.tempId)
            .then((response) => {
              this.loading = false;
              this.searchTemp();
              this.$message({
                message: "删除成功",
                type: "success",
              });
            })
            .catch((error) => {
              this.outputError(error);
            });
        })
        .catch(() => {});
    },

    //初始查询
    async pageInit() {
      this.loading = true;
      try {
        let [searchTempResp] = await Promise.all([findAllList(this.search)]);
        this.templateList = searchTempResp.data.rows;
        this.tableTotal = searchTempResp.data.total;
        this.loading = false;
      } catch (error) {
        this.outputError(error);
      }
    },
    //全局提示
    outputError(error) {
      console.log(error.response ? error.response : error.message);
      this.loading = false;
      this.$message({
        showClose: true,
        message: "出错了，请按F12查看浏览器日志。",
        type: "error",
      });
    },
  },
  components: { TempEdit },
  created() {
    this.pageInit();
  },
};
</script>

<style lang="scss" scoped>
.search-row {
  padding-bottom: 8px;
  .el-input {
    width: 260px;
  }
}

.user-locked {
  color: red;
}
.user-not-locked {
  color: green;
}
</style>

